import Vue from 'vue';
import Loading from './loading.vue';
import { addClass, removeClass, getStyle } from '../../utils/dom'

console.log(addClass,removeClass, getStyle)
const Mask = Vue.extend(Loading);

const loadingDirective = {};
loadingDirective.install = Vue => {
    const toggleLoading = (el, binding) => {
        if (binding.value) {
            // v-loading=ture
            el.instance.visible = true;
            if (binding.modifiers.fullscreen) {          
                addClass(el.mask, 'is-fullscreen');
            }
        } else {
            // v-loading=false
            el.instance.visible = false;
        }
    }
    
    Vue.directive('loading', {
        bind: function(el, binding, vnode) {
            // el 指令所绑定的元素，可以用来直接操作 DOM
            // binding 绑定值相关的对象。如binding.value就是v-loading等于的值
            // vnode当前虚拟节点
            console.log('el', el)
            console.log('binding',binding)
            console.log('vnode',vnode)
    
            const mask = new Mask({
                el: document.createElement('div'),
            })
    
            el.instance = mask; // 将loading组件实例放到el.instance上
            el.mask = mask.$el;
            el.maskStyle = {};
    
            el.appendChild(el.mask);
            if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed') {
                addClass(el, 'el-loading-parent--relative');
            }
    
            binding.value && toggleLoading(el, binding);
        },
        update: function(el, binding) {
            if (binding.oldValue !== binding.value) {
              toggleLoading(el, binding);
            }
        },
    })
}



export default loadingDirective